import React, { useState } from 'react';
import { useEffect } from 'react';

import {  getProList  , getCategoryList , updateFlag , getSearchList } from "../../api/pro"

import { Table, Space , Image , Button , Checkbox , Switch , Select ,  Input} from 'antd';
const { Column } = Table;
const {Option } = Select
const Com = () => {
  const [proList , setProList] = useState()
  const [y , setY] = useState(0)
  const [total, setTotal] = useState(0)
  const [flag , setFlag] = useState(true)

  useEffect(() => {
    getProList().then(res => {
      console.log(res);
      setProList(res.data.data)
      setTotal(res.data.total)
    })  
    setY(window.innerHeight)
  } , [])

    // 自定义分页器
  const [ current, setCurrent ] = useState(1)
  const [ pageSize, setPageSize ] = useState(10)
  const [ categoryList , setCategoryList] = useState([])
  useEffect(() =>{
    getCategoryList().then(res =>{
      console.log(res);
      const arr = []
      res.data.data.forEach(item => {
        arr.push({
          text:item,
          value:item
        })
      });
      setCategoryList(arr)
    })
  },[])

  const onFlag = (val) =>{
    // console.log(val);
    setFlag(val.target.checked)
  }
  
  const [category, setCategory] = useState('')
  const [search, setSearch] = useState('')


  const getCategory =(value) => {
    // console.log(value);
    setCategory(value)
  }
  const getSearch = (e) =>  {
    // console.log(e.target.value);
    setSearch(e.target.value)

  }
  const getData = () => {
    getSearchList({
      category,
      search
    }).then(res => setProList(res.data.data))
  }
  
    return (
      <Space direction='vertical' style={{width:'100%'}}  >
        
  
        <Space>
          <Select defaultValue="" style={{ width: 120 }} onChange={ getCategory }      >
              <Option value="">全部</Option>
                {
                  categoryList.map((item, index) => {
                    return (
                      <Option value={ item.text }  key={index} >{ item.text }</Option>
                    )
                  })
                }
          </Select>
          <Input placeholder="输入关键词" onChange = { getSearch }/>
          <Button type="primary" onClick = { getData }>搜索</Button>
          <Checkbox onChange={onFlag} checked={flag} > {flag ? '折叠折扣' : "显示折扣"}</Checkbox>
        </Space>
   
    
        <Table 
          dataSource={proList} 
          rowKey={(record) => record.proid}     
          scroll={{x:0 ,  y:y-320}} 
          pagination = {{
            position: [ 'bottomCenter' ],
            current: current,
            pageSize: pageSize,
            onChange (page, pageSize) {
              setCurrent(page)
              setPageSize(pageSize)
            },
            total,
            showTotal (total) {
              return <span>共有{total}条数据</span>
            },

            showQuickJumper: true
          }}  
        >
          <Column  title="序号" render={(text, record, index) => <span>{ (current - 1) * pageSize + index + 1 }</span> } algin="center"  />
          <Column  title="商品名称" dataIndex="proname" width={250} algin="center"  />
          <Column  title="商品图片" dataIndex="img1" render={(text , record ,index) => <Image style={{width:80 , height:80}} src={text} /> } algin="center" width={100}  />
          <Column title="商品分类" dataIndex="category"  algin="center" filters = { categoryList }   onFilter={(value, record) => record.category.indexOf(value) !== -1}  />
          <Column title="商品品牌" dataIndex="brand"     algin="center"  />
          <Column title="商品原价" dataIndex="originprice" algin="center" sorter = { (a, b) => a.originprice - b.originprice }  />
            {flag ?  <Column title="商品折扣" dataIndex="discount"   algin="center"/> : null}
          <Column title="商品库存" dataIndex="stock"     algin="center" sorter = { (a, b) => a.stock - b.stock }  />
         
         
          <Column 
            
            title="是否售卖" 
            dataIndex="issale" 
            algin="center"  
            render={(text, record ,index) => {
              return  <Switch checked = { text === 1 } onChange={(checked) => {
                          console.log(checked);
                          updateFlag({
                            proid:record.proid,
                            type:'issale',
                            flag:checked
                          }).then(() => {getProList().then(res => {
                            setProList(res.data.data) 
                          })
                        })
                      }} />
            }}
          />
         

        </Table>
      </Space>
    )

}

export default Com


